<template>
	<view>
		<view class="status_bar">
			<view class="bg"></view>
			
			<view style="width:80upx;padding-left: 15px;display: block;position: absolute;top:60upx;z-index:99;" @click="$go.back()">
				<uicon name="arrow-left" :size="60"></uicon>
			</view>
			 
			<view class="content" :style="'padding-top:100upx'">
				<view class="wrap">
					<view class="header">
						<image :src="detail.icon" mode="aspectFill"></image>
						<view class="header-content">
							<view class="booktitle">{{detail.title}}</view>
							<view class="bookcontent">
								{{detail.author}}
							</view>
							
							<view>
								<utag v-if="detail.cat" :text="detail.cat.name" type="info" mode="dark" size="mini" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="book-wrap">
			<view style="width:100%;display: flex;align-items: center;" >
				<view style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view style="font-weight: bold;font-size: 40rpx;">{{detail.hits}}</view>
					<text style="font-size: 25rpx;color:#909399">阅读人数</text>
				</view>
				<view style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view style="font-weight: bold;font-size: 40rpx;">{{getFixSize(detail.size)}}</view>
					<text style="font-size: 25rpx;color:#909399">字数</text>
				</view>
				<view style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view style="font-weight: bold;font-size: 40rpx;">{{detail && detail.finished==1?'完本':'连载'}}</view>
					<text style="font-size: 25rpx;color:#909399">状态</text>
				</view>
			</view>
		</view>
		<view class="wrap" style="margin-top:80px;margin-left: 20rpx;">
			<view style="font-weight: bold;font-size: 33rpx;">内容简介</view>
			
			<view style="padding: 10rpx;">
				<rich-text :nodes="detail.intro"></rich-text>
			</view>
			<view class="u-flex" @click="tabcatalog">
				<view class="u-flex-1" style="font-weight: bold;font-size: 33rpx;">目录</view>
				<view class="menu" style="">
					<view class="memu-item" style="font-size:32upx;color:#888;">
						<view @click="clickGoBookRead(id,item.id,0)" class="menu-item-tit" style="height: 60upx;line-height: 60upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-for="(item,index) in bookchapters" :key="index">{{item.title}}</view>
						<view @click="clickGoReadBook" class="menu-item-tit" style="height: 60upx;line-height: 60upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">...</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height:140upx;"></view>
		<view class="tabbar u-border-top u-flex tabbar_bottom" style="display: flex;">
			<view @click="clickAddRack" v-if="!(detail.irack*1)" class="xbtnrack" type="primary" >加入书架</view>
			<view v-if="detail.irack * 1" style="background: #bbb;" class="xbtnrack" type="primary" >加入书架</view>
			<view @click="clickGoReadBook" class="xbtnread" type="primary" >开始阅读</view>
		</view>
	</view>
</template>

<script>
	import uicon from '@/components/uview/u-icon.vue' ; 
	import utag  from '@/components/uview/u-tag.vue' ; 
	import ugriditem  from '@/components/uview/u-grid-item.vue' ; 

	import ugrid  from '@/components/uview/u-grid.vue' ; 
	export default {
		components: {
			uicon,
			utag,
			ugriditem,
			ugrid,

		},
		data() {
			return {
				id:0,
				detail:{},
				bookchapters:[],
			}
		},
		onShow(){
			this.fetchBook();
		},
		onLoad(props) {
			if(props.id) this.id = props.id * 1 ;
			this.fetch();
		},
		methods: {
			fetch(){
				//this.fetchBook();
				this.fetchBookchapter();
			},
			getFixSize(size){
				if(!size) return '0字' ; 
				
				if(size>10000) size = Math.round(size/ 10000) + '万字'; 
				
				return size ;
			},
			clickGoBookRead(book_id,bookchapter_id,bookchapter_speed){
				this.$go.burl('book/read?book_id='+book_id + '&bookchapter_id='+bookchapter_id + '&bookchapter_speed='+bookchapter_speed) ;
			},
			clickGoReadBook(){
				this.clickGoBookRead(this.id,this.detail.bookchapter_id,this.detail.bookchapter_speed);
			},
			fetchBook(){
				if(!this.id) return ;
				
				let that = this ;
				let post = {} ;
				post.id = this.id ;  
				
				this.$loading.show('加载中') ;
				this.$iapi.vapi('book/detail', post, {
					succ: js => {
						if(!js || !js.detail) return ; 
						
						this.detail = js.detail;
					},
					ever: js => {
						this.$loading.hide() ;
					},
				});
			},
			fetchBookchapter(){
				if(!this.id) return ;
				
				let that = this ;
				let post = {} ;
				post.book_id = this.id ;  
				post.p = 1 ;
				post.ps = 20 ;
				this.$loading.show('加载中') ;
				this.$iapi.vapi('bookchapter/list', post, {
					succ: js => {
						if(!js || !js.list || js.list.length < 1) return ; 
						
						that.bookchapters = [] ;
						js.list.map(it=>{
							that.bookchapters.push(it) ; 
						}) ;
					},
					ever: js => {
						this.$loading.hide() ;
					},
				});
			},
			clickAddRack(){
				if(!this.id || !this.detail.id) return ;
				
				let that = this ;
				let post = {} ;
				post.book_id = this.id ;  
				post.irack = 1 ; 
				this.$iapi.vapi('readinghistory/add', post, {
					succ: js => {
						this.$tip.alert('加入成功!') ;
					},
					ever: js => {
						
					},
				});
			},
			//刷新
			onPullDownRefresh() {
				wx.stopPullDownRefresh();
				this.fetchBook() ;
			},
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
		height: calc(var(--status-bar-height) + 200px); 
		width: 100%;
		overflow: hidden;
		.bg {
			width: 100%;
			height: 100%;
			background: url('https://bookcover.yuewen.com/qdbimg/349573/1209977/180');
			background-position: left;
			// background-size: cover;
			-webkit-filter: blur(2px);
			-moz-filter: blur(2px);
			-ms-filter: blur(2px);
			-o-filter: blur(2px);
			filter: blur(40px);
		}
		.content {
			position:absolute;
			top: calc(var(--status-bar-height));
		}
	}
	.wrap {
		padding: 18rpx;
	}
	.header {
		display: flex;
		height: auto;
		font-size: 32rpx;
		color: #FFFFFF;
		padding: 0rpx 35rpx;
		.header-content {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			.booktitle {
				font-family: sans-serif;
				font-size: 38rpx;
				font-weight: bold;
			}
			.bookcontent {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
	.header image {
		width: 180rpx;
		height: 240rpx;
		border-radius: 8rpx;
		margin-left: 15rpx;
	}
	.book-wrap {
		margin-bottom: 15px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
		-webkit-box-shadow: #d4d2d2 0px 0px 10px;
		-moz-box-shadow: #d4d2d2 0px 0px 10px;
		
		position: absolute;
		display: flex;
		overflow:hidden;
		height: 160rpx;
		width: auto;
		margin-top: -15px;
		left: 30rpx;
		right: 30rpx;
		border-radius: 25rpx;
		background-color: #FFFFFF;
	}

	.group {
		position: fixed;
		top: calc(var(--status-bar-height) + 80px); 
		width: 100%;
		padding: 18rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		z-index: 999;
		.header {
			justify-content:center;
			.title {
				color: #303133;
				font-size: 35rpx;
				font-weight: bold;
			}
			.close {
				color: #c0c4cc;
				position: absolute;
				right: 40rpx;
				padding-top: 10rpx;
			}
		}
		.content {
			padding: 30rpx 35rpx;
			margin-bottom: 30rpx;
		}
	}
	.tabbar {
		width: 100%;
		height: 55px;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.xbtnrack{
		width:38%;
		background: #ff6600;
		padding: 4upx 12upx;
		line-height:60upx;
		font-size:24upx;
		height:60upx;
		display: inline-block;
		margin-left:5%;
		color: #fff;
		text-align: center;
		border: 1px solid rgba(0,0,0,0.21);
		border-bottom: 4upx solid rgba(0,0,0,0.21);
		border-radius: 4upx;
	}
	
	.xbtnread{
		width:38%;
		background: #0081ff;
		padding: 4upx 12upx;
		line-height:60upx;
		font-size:24upx;
		height:60upx;
		display: inline-block;
		margin-left:5%;
		color: #fff;
		text-align: center;
		border: 1px solid rgba(0,0,0,0.21);
		border-bottom: 4upx solid rgba(0,0,0,0.21);
		border-radius: 4upx;
	}
</style>
